<template>
  <div>
    <yj-dialog
      :modal="modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
    >
      <template slot="dialog-content">
        <el-form :model="label" size="mini" label-width="120px">
          <el-form-item v-if="label.id ==''" label="选择员工">
            <el-select v-model="label.empId" placeholder="请选择活动区域">
              <el-option v-for="(emp,idx) in emps" :key="idx" :label="emp.name" :value="emp.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="流水号">
            <el-input type="text" v-model="label.outNum"></el-input>
          </el-form-item>

          <el-form-item label="业务名称">
            <el-input type="text" v-model="label.title"></el-input>
          </el-form-item>

          <el-form-item label="业务内容">
            <el-input type="text" v-model="label.content"></el-input>
          </el-form-item>

          <el-form-item label="业务额">
            <el-input type="text" placeholder="输入数字 单位/元" v-model="label.allMoney"></el-input>
          </el-form-item>

          <el-form-item label="提成点">
            <el-input type="text" placeholder="输入小数，如30%,就写 0.3" v-model="label.royaltyPoint"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" style="text-align:center" class="dialog-footer">
          <el-button size="mini" @click="cancelCargoBtn">取 消</el-button>
          <el-button size="mini" type="primary" @click="saveCargoBtn">确 定</el-button>
        </div>
      </template>
    </yj-dialog>

    <table-frame
      ref="frame"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
    >
      <template slot="top_operate" slot-scope="currentRow">
        <auth role="admin">
          <template slot="auth">
            <el-button type="primary" @click="add()" size="mini">添加</el-button>
          </template>
        </auth>
      </template>

      <template slot="columns">
        <el-table-column prop="outNum" label="流水号"></el-table-column>
        <el-table-column prop="title" label="业务名称"></el-table-column>
        <el-table-column prop="createTime" sortable label="创建时间"></el-table-column>
        <el-table-column prop="content" sortable label="业务内容"></el-table-column>
        <el-table-column prop="royaltyPoint" sortable label="提成点"></el-table-column>
        <el-table-column prop="allMoney" sortable label="业务额/元"></el-table-column>
        <el-table-column prop="royaltyMoney" sortable label="员工提成/元"></el-table-column>
        <el-table-column prop="empName" sortable label="员工"></el-table-column>
        <el-table-column prop="empPhone" sortable label="电话"></el-table-column>
      </template>
      <template slot="operate">
        <auth role="admin">
          <template slot="auth">
            <el-table-column fixed="right" label="操作" width="150">
              <template slot-scope="scope">
                <el-button @click="edit(scope.row)" type="primary" icon="el-icon-edit" size="mini"></el-button>
                <el-button
                  type="danger"
                  @click="del(scope.row.id)"
                  icon="el-icon-delete"
                  size="mini"
                ></el-button>
              </template>
            </el-table-column>
          </template>
        </auth>
      </template>
    </table-frame>
  </div>
</template>
<script>
let _this = {};
import searchModel from "./Search.vue";
export default {
  data() {
    return {
      dialog: {
        width: "60%",
        title: "新增/修改",
        visible: false,
        modal: true
      },
      prop: {
        searchShow: true,
        operateShow: true,
        location: " 业务信息",
        getDataUrl: "/task/list",
        removeUrl: "/task/remove/?",
        searchModel: searchModel,
        reloadTable: false,
        colunmsCount: 7
      },
      emps: [],
      label: {
        id: "",
        empId: "",
        title: "",
        content: "",
        royaltyPoint: "",
        allMoney: "",
        outNum: ""
      },

      visible: false,

      URL: {
        list: "/task/list",
        save: "/task/save",
        update: "/task/update",
        remove: "/task/remove/?",
        empList: "/emp/empList"
      }
    };
  },
  created() {
    this.initEmps();
  },
  methods: {
    add() {
      this.dialog.visible = true;
    },
    edit(row) {
      //alert("编辑：" + JSON.stringify(row));
      this.setDataToForm(row);
      this.dialog.visible = true;
    },
    cancelCargoBtn() {
      this.dialog.visible = false;
      this.setDataToForm(null);
    },
    initEmps() {
      this.$get(this.URL.empList, {}).then(res => {
        if (res.R) {
          this.emps = res.data;
        }
      });
    },
    checkisNum(str) {
      let res = parseInt(str);
      if (res != str) {
        let res2 = parseFloat(str);
        if (res2 == str) {
          return true;
        }
        // Object.is(parseFloat("akda"), NaN)
        return false;
      }
      return true;
    },
    saveCargoBtn() {
      if (
        this.label.empId == "" ||
        this.label.title == "" ||
        this.label.content == "" ||
        this.label.allMoney == "" ||
        this.label.outNum == "" ||
        this.label.royaltyPoint == ""
      ) {
        this.$warning("请把表单数据填写完，再提交");
        return;
      }

      if (!this.checkisNum(this.label.allMoney)) {
        this.$warning("请输入正确的金额");
        return;
      }

      if (!this.checkisNum(this.label.royaltyPoint)) {
        this.$warning("请输入正确的金额");
        return;
      }

      if (
        this.label.id != undefined &&
        this.label.id != null &&
        this.label.id != ""
      ) {
        this.update();
      } else {
        this.save();
      }
    },
    save() {
      this.$post(this.URL.save, this.label).then(res => {
        this.reqResult(res);
      });
    },
    update() {
      this.$put(this.URL.update, this.label).then(res => {
        this.reqResult(res);
      });
    },

    reqResult(res) {
      if (res.R) {
        this.$success("操作成功");
        this.dialog.visible = false;
        this.setDataToForm(null);
        this.reloadTable();
      }
    },
    setDataToForm(row) {
      if (row == null) {
        this.label.id = "";
        this.label.empId = "";
        this.label.title = "";
        this.label.content = "";
        this.label.allMoney = "";
        this.label.outNum = "";
        this.label.royaltyPoint = "";
      } else {
        this.label.id = row.id;
        this.label.empId = row.empId;
        this.label.title = row.title;
        this.label.content = row.content;

        this.label.allMoney = row.allMoney;
        this.label.outNum = row.outNum;
        this.label.royaltyPoint = row.royaltyPoint;
      }
    },
    del(id) {
      this.$confirm("此操作将永久删除已选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$del(this.URL.remove.replace("?", id), {}).then(res => {
          if (res.R) {
            this.$success("已删除");
            this.reloadTable();
          }
        });
      });
    },
    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    }
  }
};
</script>
<style scoped>
</style>